<template>
  <div class="blog-detail-container">
    <h1>{{ blog.title }}</h1>
    <aside class="aside">
      <span>日期：{{ moment(+blog.createDate).format('YYYY-MM-DD') }}</span>
      <span>浏览：{{ blog.scanNumber }}</span>
      <a>评论:{{ blog.commentNumber }}</a>
      <RouterLink :to="`/category/${blog.category.id}`">{{ blog.category.name }}</RouterLink>
    </aside>
    <div class="markdown-body" v-html="blog.htmlContent"></div>
    <MessageArea/>
  </div>
</template>

<script>
import '@/styles/markdown.css'
import moment from "moment";
import 'highlight.js/styles/github-dark.css'
import MessageArea from "@/components/MessageArea/index.vue";
export default {
  name: "BlogDetail",
  components: {MessageArea},
  props: {
    blog: {
      type: Object,
      required: true
    }
  },
  methods: {
    moment
  }
}
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
.blog-detail-container {
  padding: 10px 20px;
  .aside {
    font-size: 12px;
    color: @gray;
    span, a{
      margin-right: 10px;
    }
  }
}
.markdown-body{
  margin: 2em 0;
}

</style>